import React, { FC, ReactElement } from 'react';
import TdItem from './Item';
import { ITodo } from '../typings';

interface IProps {
  todoList: ITodo[];
  toggleTodo: (id: number) => void;
  removeTodo: (id: number) => void;
}

const TdList: FC<IProps> = ({
  todoList, 
  toggleTodo, 
  removeTodo
}): ReactElement => {
  return (
    <div className="todo-list">
      { todoList && todoList.map((todo: ITodo) => {
        return (<TdItem key={todo.id} todo={todo} toggleTodo={toggleTodo} removeTodo={removeTodo} />)
      }) }
    </div>
  )
}
// 数据传递

export default TdList;
